<template>
  <div>
    <p style="font-size:36px">首页</p>
    <el-col :xs='24' :sm="24" :md="8" v-for='(item,index) in base_count' :key="index" >
      <div :style="intruduce[index]">
        <p>{{item}}</p>
        <p>用户总数</p>
      </div>
    </el-col>
    <!-- <el-col :xs='24'  :sm="24" :md="8">
      <div style="background:#6BBE6B">
        <p>916</p>
        <p>商品总数</p>
      </div>
    </el-col>
    <el-col :xs='24'  :sm="24" :md="8">
      <div style="background:#5DB8D3">
        <p>916</p>
        <p>订单总数</p>                                                                                                              
      </div>
    </el-col> -->
  </div>
</template>

<script>
import {base_count} from '../../../util/http'
export default {
  // 组件名称
  name: "demo", // 组件参数 接收来自父组件的数据
  props: [],
  components: {},
  data() {
    return {
      base_count:[],
      intruduce:{
        'orderCount': "background:#F0AF54",
        'productCount': "background:#6BBE6B",
        'userCount': "background:#5DB8D3",
      },
      content:{
        'orderCount': "用户总数",
        'productCount': "商品总数",
        'userCount': "订单总数",
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    async getBase_cound(){
      const {data:res} = await base_count(`/api/manage/statistic/base_count.do`)
      console.log(res)
      if( res.status !== 0 ) return this.$message.error('获取首页数据失败')
      this.base_count = res.data
      console.log(this.base_count)
      this.$message.success('获取首页数据成功')
    }
  },





  
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.getBase_cound()
  }
};
</script> 
<style scoped>
.el-col>div{
    width: 95%;
    height: 250px;
    box-sizing: border-box;
    padding: 10px;
    background: yellow;
    text-align: center;
}
.el-col>div>p:nth-of-type(1){
    color: #fff;
    /* font-weight: bold; */
    font-size: 46px;
    line-height: 75px;
}
.el-col>div>p:nth-of-type(2){
    color: #fff;
    margin-top: 15px;
}
</style>
